<div class="container-fluid my-3">
  <h2>
    {{ get_icon('b_events', t('Events')) }}
    {{ show_mysql_docu('EVENTS') }}
  </h2>

  <div class="d-flex flex-wrap my-3">
    {%- if items is not empty %}
    <div>
      <div class="input-group">
        <div class="input-group-text">
          <div class="form-check mb-0">
            <input class="form-check-input checkall_box" type="checkbox" value="" id="checkAllCheckbox" form="rteListForm">
            <label class="form-check-label" for="checkAllCheckbox">{{ t('Check all') }}</label>
          </div>
        </div>
        <button class="btn btn-outline-secondary" id="bulkActionExportButton" type="submit" name="submit_mult" value="export" form="rteListForm" title="{{ t('Export') }}">
          {{ get_icon('b_export', t('Export')) }}
        </button>
        <button class="btn btn-outline-secondary" id="bulkActionDropButton" type="submit" name="submit_mult" value="drop" form="rteListForm" title="{{ t('Drop') }}">
          {{ get_icon('b_drop', t('Drop')) }}
        </button>
      </div>
    </div>
    {%- endif %}

    <div{{ items is not empty ? ' class="ms-auto"' }}>
      <a class="ajax add_anchor btn btn-primary{{ not has_privilege ? ' disabled' }}" href="{{ url('/database/events', {'db': db, 'add_item': true}) }}" role="button"{{ not has_privilege ? ' tabindex="-1" aria-disabled="true"' }}>
        {{ get_icon('b_event_add', t('Create new event')) }}
      </a>
    </div>
  </div>

  <form id="rteListForm" class="ajax" action="{{ url('/database/events') }}">
    {{ get_hidden_inputs(db) }}

    <div id="nothing2display"{{ items is not empty ? ' class="hide"' }}>
      {{ t('There are no events to display.')|notice }}
    </div>

    <table id="eventsTable" class="table table-striped table-hover{{ items is empty ? ' hide' }} w-auto data">
      <thead>
      <tr>
        <th></th>
        <th>{{ t('Name') }}</th>
        <th>{{ t('Status') }}</th>
        <th>{{ t('Type') }}</th>
        <th colspan="3"></th>
      </tr>
      </thead>
      <tbody>
      <tr class="hide">{% for i in 0..6 %}<td></td>{% endfor %}</tr>

      {% for event in items %}
        <tr{{ is_ajax ? ' class="ajaxInsert hide"' }}>
          <td>
            <input type="checkbox" class="checkall" name="item_name[]" value="{{ event.name }}">
          </td>
          <td>
            <span class="drop_sql hide">{{ 'DROP EVENT IF EXISTS %s'|format(backquote(event.name)) }}</span>
            <strong>{{ event.name }}</strong>
          </td>
          <td>
            {{ event.status }}
          </td>
          <td>
            {{ event.type }}
          </td>
          <td>
            {% if has_privilege %}
              <a class="ajax edit_anchor" href="{{ url('/database/events', {
                'db': db,
                'edit_item': true,
                'item_name': event.name
              }) }}">
                {{ get_icon('b_edit', t('Edit')) }}
              </a>
            {% else %}
              {{ get_icon('bd_edit', t('Edit')) }}
            {% endif %}
          </td>
          <td>
            <a class="ajax export_anchor" href="{{ url('/database/events', {
              'db': db,
              'export_item': true,
              'item_name': event.name
            }) }}">
              {{ get_icon('b_export', t('Export')) }}
            </a>
          </td>
          <td>
            {% if has_privilege %}
              {{ link_or_button(
                url('/sql'),
                {
                  'db': db,
                  'sql_query': 'DROP EVENT IF EXISTS %s'|format(backquote(event.name)),
                  'goto': url('/database/events', {'db': db})
                },
                get_icon('b_drop', t('Drop')),
                {'class': 'ajax drop_anchor'}
              ) }}
            {% else %}
              {{ get_icon('bd_drop', t('Drop')) }}
            {% endif %}
          </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </form>

  <div class="card mt-3">
    <div class="card-header">{{ t('Event scheduler status') }}</div>
    <div class="card-body">
      <div class="wrap">
        <div class="wrapper toggleAjax hide">
          <div class="toggleButton">
            <div title="{{ t('Click to toggle') }}" class="toggle-container {{ scheduler_state ? 'on' : 'off' }}">
              <img src="{{ image('toggle-' ~ pma.text_dir ~ '.png') }}">
              <table>
                <tbody>
                <tr>
                  <td class="toggleOn">
                  <span class="hide">
                    {{- url('/sql', {
                      'db': db,
                      'goto': url('/database/events', {'db': db}),
                      'sql_query': 'SET GLOBAL event_scheduler="ON"',
                    }) -}}
                  </span>
                    <div>{{ t('ON') }}</div>
                  </td>
                  <td><div>&nbsp;</div></td>
                  <td class="toggleOff">
                  <span class="hide">
                    {{- url('/sql', {
                      'db': db,
                      'goto': url('/database/events', {'db': db}),
                      'sql_query': 'SET GLOBAL event_scheduler="OFF"',
                    }) -}}
                  </span>
                    <div>{{ t('OFF') }}</div>
                  </td>
                </tr>
                </tbody>
              </table>
              <span class="hide callback">window.pmaSlidingMessage(data.sql_query);</span>
              <span class="hide text_direction">{{ pma.text_dir }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="eventsEditorModal" tabindex="-1" aria-labelledby="eventsEditorModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="eventsEditorModalLabel">{{ t('Event editor') }}</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
        </div>
        <div class="modal-body">
          <div class="spinner-border" role="status">
            <span class="visually-hidden">{{ t('Loading…') }}</span>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ t('Close') }}</button>
          <button type="button" class="btn btn-primary" id="eventsEditorModalSaveButton">{{ t('Save changes') }}</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="eventsExportModal" tabindex="-1" aria-labelledby="eventsExportModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="eventsExportModalLabel">{{ t('Export event') }}</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
        </div>
        <div class="modal-body"></div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ t('Close') }}</button>
        </div>
      </div>
    </div>
  </div>
</div>
